<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>局部组件</title>
	</head>
	<body>
		<div id="app">
			<hello1-com></hello1-com>
			<person-com></person-com>
		</div>
		<template id = "hello1Tem">
			<div>
			<h3>{{msg}}</h3>
				
			</div>
		</template>
		<template id ="personTem">
			<div>
				{{msg}}
			</div>
		</template>
		
		<script src="../js/vue.js">
			
		</script>
		<script type="text/javascript">
			// 定义对象
			let hello1 = {
				data(){
					return{
						msg:"hello1"
					}
				},
				template:"#hello1Tem"
				
			}
			// 定义第二个组件对象
			let personCom={
				data(){
					return{
						msg:"一个勺子"
					}
				},
				template:"#personTem"
			}
			const app = new Vue({
				el:"#app",
				//定义局部组件
				components:{
					hello1Com:hello1,
					// personCom:personCom
					personCom//如果key和value值相同，可以简化为key
				}
			})
		</script>
		
	</body>
</html>
